import { onBeforeMount, onMounted, provide, reactive, ref } from 'vue';
import { computed, defineComponent, SetupContext } from 'vue';
import { MemoryVoiceProps, memoryVoiceProps } from './memory-voice.props';
import FMemoryVoiceHeader from './components/header/header.component';
import FMemoryVoicePlayBar from './components/play-bar/play-bar.component';
import FMemoryVoiceResourceList from './components/resource-lsit/resource-list.component';
import FMemoryVoicePersonalCenter from './components/personnel-center/personnel-center.component';
import FMemoryVoiceCarousel from './components/carousel/carousel.component';
import './memory-voice.scss';
import {curShareInfo } from './public/share-data';
import { HeaderNavType } from './composition/types';
import { userInfo } from './composition/use-data';

export default defineComponent({
    name: 'FMemoryVoice',
    props: memoryVoiceProps,
    emits: [] as (string[] & ThisType<void>) | undefined,
    setup(props: MemoryVoiceProps, context: SetupContext) {
        // 当前资料
        // provide('curResource', curResource);
        // // 当前科目
        // provide('curResourceCourse', curResourceCourse);
        provide('curShareInfo',curShareInfo)
        const data = ref(props.data);
        const searchBoxData = data.value.header.searchBox.recommendedData;
        const leaderboardData = data.value.leaderboardData;
        const hotRecommendedData = data.value.hotRecommendedData;
        const personalizedRecommendedData = data.value.personalizedRecommendedData;
        // const userInfo = data.value.userInfo;

        const currentView = ref(HeaderNavType.HomePage);

        function onChangeHeaderTab(newTab: HeaderNavType) {
            currentView.value = newTab;
        }
        onBeforeMount(() => {
            userInfo.value = data.value.userInfo;
        });
        const state: any = reactive({
            slideIndex: 0,
            list: data.value.carouselData
        });
    
        return () => {
            return (
                <div class="memory-voice">                    
                    <FMemoryVoiceHeader recommendedData={searchBoxData} onChange={onChangeHeaderTab}></FMemoryVoiceHeader>
                    {currentView.value === HeaderNavType.HomePage ? (
                        <div class="home-page">
                             <div class="carousel">
        <div class="main_box">
        <FMemoryVoiceCarousel list={state.list} showPaging={true} showPrevNext={true} 
        v-slots={{
            default: (props) => (
              <div class="test_wraper">
                {state.list[props.index].map((item, index) => (
                  <img src={item.url} key={index} />
                ))}
              </div>
            )
          }}
        >
         </FMemoryVoiceCarousel>
        </div>
    </div>
                            <div class="f-page-main main-container" style="padding-bottom:50px;">
                                <f-splitter class="f-page-content">
                                    <f-splitter-pane class="f-col-w8 f-page-content-nav" position="left" style="min-width: 300px">
                                        <FMemoryVoiceResourceList
                                            data={hotRecommendedData?.data}
                                            mainCategory={hotRecommendedData.mainCategory}
                                            subCategories={hotRecommendedData?.subCategories}></FMemoryVoiceResourceList>
                                        <FMemoryVoiceResourceList
                                            data={personalizedRecommendedData?.data}
                                            mainCategory={personalizedRecommendedData.mainCategory}
                                            subCategories={personalizedRecommendedData?.subCategories}></FMemoryVoiceResourceList>
                                    </f-splitter-pane>
                                    <f-splitter-pane class="f-page-content-main" position="center">
                                        <FMemoryVoiceResourceList
                                            data={leaderboardData?.data}
                                            mainCategory={leaderboardData.mainCategory}
                                            showDirection="vertical"
                                            isHot={false}></FMemoryVoiceResourceList>
                                    </f-splitter-pane>
                                </f-splitter>
                            </div>
                        </div>
                    ) : (
                        ''
                    )}
                    {currentView.value === HeaderNavType.CreateResouce ? <FMemoryVoicePersonalCenter></FMemoryVoicePersonalCenter> : ''}
                   
                  
           
         
                    <FMemoryVoicePlayBar></FMemoryVoicePlayBar>

                </div>
            );
        };
    }
});
